import React, { ReactElement, forwardRef } from 'react';
import {
  Radio,
  Select,
  Input,
  DatePicker,
  Cascader,
  Checkbox,
  TreeSelect,
  InputNumber,
} from 'antd';
import Color from '../Color';
import { IconPicker } from '@inbiz/setters';
import MultilingualInput from '@inbiz/basic/MultilingualInput';
import { TextWidget, getMessage } from '@inbiz/react';
type IOptions = {
  name?: string;
  label?: string;
  value: string;
  title?: string;
  disabled?: boolean;
  children?: any;
  [key: string]: any;
};
type IFormItemType = {
  type:
  | 'Radio'
  | 'Select'
  | 'DatePicker'
  | 'Cascader'
  | 'Checkbox'
  | 'TreeSelect'
  | 'TextArea'
  | 'InputNumber'
  | 'Input'
  | 'Color'
  | 'IconPicker';
  options?: IOptions[];
  optgroups?: {
    label: string;
    key?: string;
    options: IOptions[];
  }[];
  [key: string]: any;
};
const FormItemType = forwardRef(
  (
    { type, options, optgroups, rowIndex, ...restProps }: IFormItemType,
    ref: any,
  ): ReactElement => {
    switch (type) {
      case 'Radio': {
        return (
          <Radio.Group {...restProps} ref={ref}>
            {(options || []).map(({ name, value, ...restItem }) => (
              <Radio value={value} key={value} {...restItem}>
                {name}
              </Radio>
            ))}
          </Radio.Group>
        );
      }
      case 'Select': {
        const getOptions = (options: IOptions[]) =>
          (options || []).map(
            ({ name, label, value, disabled, title, ...restItem }) => (
              <Select.Option
                value={value}
                // title={title}
                disabled={disabled}
                {...restItem}
                key={value}
              >
                <TextWidget>{name || label}</TextWidget>
              </Select.Option>
            ),
          );
        const getGroups = (optgroups: IFormItemType['optgroups']) =>
          (optgroups || []).map(({ label, key, options }) => (
            <Select.OptGroup label={label} key={key || label}>
              {getOptions(options)}
            </Select.OptGroup>
          ));
        return (
          <Select {...restProps} ref={ref}>
            {options ? getOptions(options) : getGroups(optgroups)}
          </Select>
        );
      }
      case 'DatePicker': {
        return <DatePicker {...restProps} ref={ref} />;
      }
      case 'Cascader': {
        const refactor = (
          optionsData: IFormItemType['options'],
        ): IFormItemType['options'] =>
          (optionsData || []).map((item) => ({
            ...item,
            label: item.label || item.name,
            children:
              item.children && item.children.length
                ? refactor(item.children)
                : undefined,
          }));
        return (
          <Cascader options={refactor(options)} {...restProps} ref={ref} />
        );
      }
      case 'Checkbox': {
        return (
          <Checkbox.Group
            options={(options || []).map(
              ({ label, name, value, ...restItem }) => ({
                label: label || name,
                value,
                ...restItem,
              }),
            )}
            {...restProps}
            ref={ref}
          />
        );
      }
      case 'TreeSelect': {
        const refactor = (
          optionsData: IFormItemType['options'],
        ): IFormItemType['options'] =>
          (optionsData || []).map((item) => ({
            ...item,
            title: item.title || item.name,
            children:
              item.children && item.children.length
                ? refactor(item.children)
                : undefined,
          }));
        return (
          <TreeSelect treeData={refactor(options)} {...restProps} ref={ref} />
        );
      }
      case 'TextArea': {
        return <Input.TextArea {...restProps} ref={ref} />;
      }
      case 'InputNumber':
        return <InputNumber {...restProps} ref={ref} />;
      case 'Color':
        // scrollTop 高度
        let grop = document.querySelector(
          '.editableTable .ant-table-body',
        ).scrollTop;
        if (!grop) {
          grop = 0;
        }
        //modal + table heard= 280 ;  tr 高度58*表格系数-scrollTop-表格系数
        let overTop = 280 + 58 * (rowIndex + 1) - grop - rowIndex;
        const colorScrollStyle = {
          position: 'fixed',
          top: overTop,
          ...restProps.style,
        };
        return <Color {...restProps} ref={ref} style={colorScrollStyle} />;
      case 'IconPicker':
        const { value, onChange, ...rest } = restProps;
        return (
          <IconPicker
            onChange={(value) => onChange(value?.type)}
            value={{ type: value }}
            pVisible={true}
            {...rest}
          />
        );
      case 'Input':
        return (
          <MultilingualInput
            {...restProps}
            ref={ref}
            value={getMessage(restProps.value)}
          />
        );
      default:
        return <Input {...restProps} ref={ref} />;
    }
  },
);

export default FormItemType;
export type { IFormItemType };
